<template>
  
</template>

<script>
import indexApi from "@/api/indexApi"

export default {
		data(){
			return{
				menuList:[]
			}
		},
		mounted(){
			this.getMenuOne()
		},
		methods:{
			async getMenuOne(){
				const menuList = (await indexApi.getMenuOne()).data;
				for(let menuOne of menuList){
					menuOne.children = (await indexApi.getMenuChildren({menuId:menuOne.id})).data;
					for(let menuTwo of menuOne.children){
						menuTwo.children = (await indexApi.getMenuChildren({menuId:menuTwo.id})).data;
						for(let menuThree of menuTwo.children){
							menuThree.children = (await indexApi.getMenuChildren({menuId:menuThree.id}))
						}
					}
				}
				this.menuList = menuList;
		},
		showDetails(e,type){
			if(type == 1){
				const preLineDom = e.currentTarget.queryselector('.pre_line')
				if(preLineDom){
					preLineDom.style.height = '10%'
				}
				const menuTwoDom = e.currentTarget.queryselector('.menu_two')
				if(menuTwoDom){
					menuTwoDom.style.display = 'block'
				}
			}else if(type == 2){
				const menuThreeDom = e.currentTarget.queryselector('.menu_three')
				menuThreeDom.style.display = 'block'
			}
		},
		hiddenDetails(e,type){
			if(type == 1){
				const preLineDom = e.currentTarget.queryselector('.pre_line')
					if(preLineDom){
						preLineDom.style.height = '0%'
					}
					const menuTwoDom = e.currentTarget.queryselector('.menu_two')
					if(menuTwoDom){
						menuTwoDom.style.display = 'none'
					}
				}else if(type == 2){
					const menuThreeDom = e.currentTarget.queryselector('.menu_three')
					menuThreeDom.style.display = 'none'
				}
			}
		}
}
</script>
